
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_chanpinguanlifahuoguanli"></use>
                    </svg>
                    <div class="name">hx_产品管理，发货管理</div>
                    <div class="fontclass">#hx-hx_chanpinguanlifahuoguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_jianguan"></use>
                    </svg>
                    <div class="name">hx_监管</div>
                    <div class="fontclass">#hx-hx_jianguan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_qiye"></use>
                    </svg>
                    <div class="name">hx_企业</div>
                    <div class="fontclass">#hx-hx_qiye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_yiyuanyiliaojigou"></use>
                    </svg>
                    <div class="name">hx_医院，医疗机构</div>
                    <div class="fontclass">#hx-hx_yiyuanyiliaojigou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_shengchanqiyeguanli"></use>
                    </svg>
                    <div class="name">hx_生产企业管理</div>
                    <div class="fontclass">#hx-hx_shengchanqiyeguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_baojiadan"></use>
                    </svg>
                    <div class="name">hx_报价单</div>
                    <div class="fontclass">#hx-hx_baojiadan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_qiyeguanli"></use>
                    </svg>
                    <div class="name">hx_企业管理</div>
                    <div class="fontclass">#hx-hx_qiyeguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_x-dengsikaotishifuben"></use>
                    </svg>
                    <div class="name">hx_x-等，思考，提示 副本</div>
                    <div class="fontclass">#hx-hx_x-dengsikaotishifuben</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_jisuanbaojia"></use>
                    </svg>
                    <div class="name">hx_计算，报价</div>
                    <div class="fontclass">#hx-hx_jisuanbaojia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_cuxiajiantou"></use>
                    </svg>
                    <div class="name">hx_粗下箭头</div>
                    <div class="fontclass">#hx-hx_cuxiajiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xshuaxin"></use>
                    </svg>
                    <div class="name">hx_x刷新</div>
                    <div class="fontclass">#hx-hx_xshuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xshoucang"></use>
                    </svg>
                    <div class="name">hx_x收藏</div>
                    <div class="fontclass">#hx-hx_xshoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_danzi"></use>
                    </svg>
                    <div class="name">hx_单子</div>
                    <div class="fontclass">#hx-hx_danzi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xquandagou"></use>
                    </svg>
                    <div class="name">hx_x圈打钩</div>
                    <div class="fontclass">#hx-hx_xquandagou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_zhengfuguanlijigou-"></use>
                    </svg>
                    <div class="name">hx_政府，管理机构-136</div>
                    <div class="fontclass">#hx-hx_zhengfuguanlijigou-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_zhengfuguanlijigou-1"></use>
                    </svg>
                    <div class="name">hx_政府，管理机构-135</div>
                    <div class="fontclass">#hx-hx_zhengfuguanlijigou-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_jianguan1"></use>
                    </svg>
                    <div class="name">hx_监管2</div>
                    <div class="fontclass">#hx-hx_jianguan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_cushangjiantou"></use>
                    </svg>
                    <div class="name">hx_粗上箭头</div>
                    <div class="fontclass">#hx-hx_cushangjiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xshangchuan"></use>
                    </svg>
                    <div class="name">hx_x上传</div>
                    <div class="fontclass">#hx-hx_xshangchuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xbianjishuru"></use>
                    </svg>
                    <div class="name">hx_x编辑，输入</div>
                    <div class="fontclass">#hx-hx_xbianjishuru</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_shengchanqiye"></use>
                    </svg>
                    <div class="name">hx_生产企业</div>
                    <div class="fontclass">#hx-hx_shengchanqiye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xquandacha"></use>
                    </svg>
                    <div class="name">hx_x圈打叉</div>
                    <div class="fontclass">#hx-hx_xquandacha</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_tubiao"></use>
                    </svg>
                    <div class="name">hx_图表</div>
                    <div class="fontclass">#hx-hx_tubiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xtianjiayonghu"></use>
                    </svg>
                    <div class="name">hx_x添加用户</div>
                    <div class="fontclass">#hx-hx_xtianjiayonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_yiliaojigouguanli"></use>
                    </svg>
                    <div class="name">hx_医疗机构管理</div>
                    <div class="fontclass">#hx-hx_yiliaojigouguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_jingjiapaimai"></use>
                    </svg>
                    <div class="name">hx_竞价，拍卖</div>
                    <div class="fontclass">#hx-hx_jingjiapaimai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_gengduogongneng"></use>
                    </svg>
                    <div class="name">hx_更多功能</div>
                    <div class="fontclass">#hx-hx_gengduogongneng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xyonghu"></use>
                    </svg>
                    <div class="name">hx_x用户</div>
                    <div class="fontclass">#hx-hx_xyonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_cuyoujiantou"></use>
                    </svg>
                    <div class="name">hx_粗右箭头</div>
                    <div class="fontclass">#hx-hx_cuyoujiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_tubiao1"></use>
                    </svg>
                    <div class="name">hx_图表2</div>
                    <div class="fontclass">#hx-hx_tubiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_baojiagongju"></use>
                    </svg>
                    <div class="name">hx_报价工具</div>
                    <div class="fontclass">#hx-hx_baojiagongju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_dagouxuanzhong"></use>
                    </svg>
                    <div class="name">hx_打钩选中</div>
                    <div class="fontclass">#hx-hx_dagouxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xcuguanbishanchudacha"></use>
                    </svg>
                    <div class="name">hx_x粗关闭，删除，打叉</div>
                    <div class="fontclass">#hx-hx_xcuguanbishanchudacha</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xjinzhi"></use>
                    </svg>
                    <div class="name">hx_x禁止</div>
                    <div class="fontclass">#hx-hx_xjinzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xbiaoqian"></use>
                    </svg>
                    <div class="name">hx_x标签</div>
                    <div class="fontclass">#hx-hx_xbiaoqian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_cuzuojiantou"></use>
                    </svg>
                    <div class="name">hx_粗左箭头</div>
                    <div class="fontclass">#hx-hx_cuzuojiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xfenxiang"></use>
                    </svg>
                    <div class="name">hx_x分享</div>
                    <div class="fontclass">#hx-hx_xfenxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xsousuo"></use>
                    </svg>
                    <div class="name">hx_x 搜索</div>
                    <div class="fontclass">#hx-hx_xsousuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xsaomiao"></use>
                    </svg>
                    <div class="name">hx_x扫描</div>
                    <div class="fontclass">#hx-hx_xsaomiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xxiazai"></use>
                    </svg>
                    <div class="name">hx_x下载</div>
                    <div class="fontclass">#hx-hx_xxiazai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xriqirili"></use>
                    </svg>
                    <div class="name">hx_x日期，日历</div>
                    <div class="fontclass">#hx-hx_xriqirili</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xtongxunlu"></use>
                    </svg>
                    <div class="name">hx_x通讯录</div>
                    <div class="fontclass">#hx-hx_xtongxunlu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xjiesuanjine"></use>
                    </svg>
                    <div class="name">hx_x结算，金额</div>
                    <div class="fontclass">#hx-hx_xjiesuanjine</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xdagou"></use>
                    </svg>
                    <div class="name">hx_x打钩</div>
                    <div class="fontclass">#hx-hx_xdagou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xdacha"></use>
                    </svg>
                    <div class="name">hx_x打叉</div>
                    <div class="fontclass">#hx-hx_xdacha</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xyoujiantou"></use>
                    </svg>
                    <div class="name">hx_x右箭头</div>
                    <div class="fontclass">#hx-hx_xyoujiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_fahuobaoguokuaidihuowu"></use>
                    </svg>
                    <div class="name">hx_发货，包裹，快递，货物</div>
                    <div class="fontclass">#hx-hx_fahuobaoguokuaidihuowu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_baobiao"></use>
                    </svg>
                    <div class="name">hx_报表</div>
                    <div class="fontclass">#hx-hx_baobiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_shouhuo"></use>
                    </svg>
                    <div class="name">hx_收货</div>
                    <div class="fontclass">#hx-hx_shouhuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xxiajiantou"></use>
                    </svg>
                    <div class="name">hx_x下箭头</div>
                    <div class="fontclass">#hx-hx_xxiajiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_x-suomima"></use>
                    </svg>
                    <div class="name">hx_x-锁，密码</div>
                    <div class="fontclass">#hx-hx_x-suomima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_fenleiyingyongxiangmu"></use>
                    </svg>
                    <div class="name">hx_分类，应用，项目</div>
                    <div class="fontclass">#hx-hx_fenleiyingyongxiangmu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_kongjianheziyingyong"></use>
                    </svg>
                    <div class="name">hx_空间，盒子，应用，</div>
                    <div class="fontclass">#hx-hx_kongjianheziyingyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xlajitongshanchu"></use>
                    </svg>
                    <div class="name">hx_x垃圾桶，删除</div>
                    <div class="fontclass">#hx-hx_xlajitongshanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xshangjiantou"></use>
                    </svg>
                    <div class="name">hx_x上箭头</div>
                    <div class="fontclass">#hx-hx_xshangjiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_ziliaoshouce"></use>
                    </svg>
                    <div class="name">hx_资料，手册</div>
                    <div class="fontclass">#hx-hx_ziliaoshouce</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xkuaidipeisong"></use>
                    </svg>
                    <div class="name">hx_x快递，配送</div>
                    <div class="fontclass">#hx-hx_xkuaidipeisong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_yousanjiao"></use>
                    </svg>
                    <div class="name">hx_右三角</div>
                    <div class="fontclass">#hx-hx_yousanjiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_x-dengsikaotishi"></use>
                    </svg>
                    <div class="name">hx_x-等，思考，提示</div>
                    <div class="fontclass">#hx-hx_x-dengsikaotishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xerweima"></use>
                    </svg>
                    <div class="name">hx_x二维码</div>
                    <div class="fontclass">#hx-hx_xerweima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xbibianji"></use>
                    </svg>
                    <div class="name">hx_x笔，编辑</div>
                    <div class="fontclass">#hx-hx_xbibianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_zuosanjiao"></use>
                    </svg>
                    <div class="name">hx_做三角</div>
                    <div class="fontclass">#hx-hx_zuosanjiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xriqirili1"></use>
                    </svg>
                    <div class="name">hx_x 日期，日历</div>
                    <div class="fontclass">#hx-hx_xriqirili1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xuanzhongcheck"></use>
                    </svg>
                    <div class="name">hx_选中check</div>
                    <div class="fontclass">#hx-hx_xuanzhongcheck</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xfangzishouye"></use>
                    </svg>
                    <div class="name">hx_x房子，首页</div>
                    <div class="fontclass">#hx-hx_xfangzishouye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_dianhua"></use>
                    </svg>
                    <div class="name">hx_电话</div>
                    <div class="fontclass">#hx-hx_dianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_yonghu"></use>
                    </svg>
                    <div class="name">hx_用户</div>
                    <div class="fontclass">#hx-hx_yonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_shoucang"></use>
                    </svg>
                    <div class="name">hx_收藏</div>
                    <div class="fontclass">#hx-hx_shoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_tianjiajiahao"></use>
                    </svg>
                    <div class="name">hx_添加，加号</div>
                    <div class="fontclass">#hx-hx_tianjiajiahao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xshijianlishi"></use>
                    </svg>
                    <div class="name">hx_x时间，历史</div>
                    <div class="fontclass">#hx-hx_xshijianlishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xzuojiantou"></use>
                    </svg>
                    <div class="name">hx_x左箭头</div>
                    <div class="fontclass">#hx-hx_xzuojiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_x-dianhua"></use>
                    </svg>
                    <div class="name">hx_x-电话</div>
                    <div class="fontclass">#hx-hx_x-dianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_peizaizhuangche"></use>
                    </svg>
                    <div class="name">hx_配载，装车</div>
                    <div class="fontclass">#hx-hx_peizaizhuangche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_tupian"></use>
                    </svg>
                    <div class="name">hx_图片</div>
                    <div class="fontclass">#hx-hx_tupian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_qiyegongyingshang"></use>
                    </svg>
                    <div class="name">hx_企业，供应商</div>
                    <div class="fontclass">#hx-hx_qiyegongyingshang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_ziliaoxinxi"></use>
                    </svg>
                    <div class="name">hx_资料，信息</div>
                    <div class="fontclass">#hx-hx_ziliaoxinxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xshezhidingzhi"></use>
                    </svg>
                    <div class="name">hx_x设置，定制</div>
                    <div class="fontclass">#hx-hx_xshezhidingzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_cangkukucun"></use>
                    </svg>
                    <div class="name">hx_仓库，库存</div>
                    <div class="fontclass">#hx-hx_cangkukucun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xlabatongzhi"></use>
                    </svg>
                    <div class="name">hx_x喇叭，通知</div>
                    <div class="fontclass">#hx-hx_xlabatongzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_zhengquexuanzhong"></use>
                    </svg>
                    <div class="name">hx_正确，选中</div>
                    <div class="fontclass">#hx-hx_zhengquexuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_wuxiaodingdan"></use>
                    </svg>
                    <div class="name">hx_无效订单</div>
                    <div class="fontclass">#hx-hx_wuxiaodingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_yingyongfenleiqita"></use>
                    </svg>
                    <div class="name">hx_应用，分类，其他</div>
                    <div class="fontclass">#hx-hx_yingyongfenleiqita</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_cuowushanchu"></use>
                    </svg>
                    <div class="name">hx_错误，删除</div>
                    <div class="fontclass">#hx-hx_cuowushanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_chewuliukuaidi"></use>
                    </svg>
                    <div class="name">hx_车，物流，快递</div>
                    <div class="fontclass">#hx-hx_chewuliukuaidi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xiasanjiao"></use>
                    </svg>
                    <div class="name">hx_下三角</div>
                    <div class="fontclass">#hx-hx_xiasanjiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_dingwei"></use>
                    </svg>
                    <div class="name">hx_定位</div>
                    <div class="fontclass">#hx-hx_dingwei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_shangsanjiao"></use>
                    </svg>
                    <div class="name">hx_上三角</div>
                    <div class="fontclass">#hx-hx_shangsanjiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_youjian"></use>
                    </svg>
                    <div class="name">hx_邮件</div>
                    <div class="fontclass">#hx-hx_youjian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_dingdanliebiaodeng"></use>
                    </svg>
                    <div class="name">hx_订单，列表等</div>
                    <div class="fontclass">#hx-hx_dingdanliebiaodeng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_shanchulajitong"></use>
                    </svg>
                    <div class="name">hx_删除，垃圾桶</div>
                    <div class="fontclass">#hx-hx_shanchulajitong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_shezhizidingyi"></use>
                    </svg>
                    <div class="name">hx_设置，自定义</div>
                    <div class="fontclass">#hx-hx_shezhizidingyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_gengduodian"></use>
                    </svg>
                    <div class="name">hx_更多，点</div>
                    <div class="fontclass">#hx-hx_gengduodian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_fenleixitongyingyong"></use>
                    </svg>
                    <div class="name">hx_分类，系统，应用</div>
                    <div class="fontclass">#hx-hx_fenleixitongyingyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_duihua"></use>
                    </svg>
                    <div class="name">hx_对话</div>
                    <div class="fontclass">#hx-hx_duihua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_shoucangwujiaoxing"></use>
                    </svg>
                    <div class="name">hx_收藏，五角星</div>
                    <div class="fontclass">#hx-hx_shoucangwujiaoxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_ruxuanguanli"></use>
                    </svg>
                    <div class="name">hx_入选管理</div>
                    <div class="fontclass">#hx-hx_ruxuanguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_tongxunlu"></use>
                    </svg>
                    <div class="name">hx_通讯录</div>
                    <div class="fontclass">#hx-hx_tongxunlu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx-"></use>
                    </svg>
                    <div class="name">hx-33</div>
                    <div class="fontclass">#hx-hx-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_labatishi"></use>
                    </svg>
                    <div class="name">hx_喇叭，提示</div>
                    <div class="fontclass">#hx-hx_labatishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_riqirili"></use>
                    </svg>
                    <div class="name">hx_日期，日历</div>
                    <div class="fontclass">#hx-hx_riqirili</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_dingdan"></use>
                    </svg>
                    <div class="name">hx_订单</div>
                    <div class="fontclass">#hx-hx_dingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_cudachaguanbishanchu"></use>
                    </svg>
                    <div class="name">hx_粗打叉，关闭，删除</div>
                    <div class="fontclass">#hx-hx_cudachaguanbishanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_jiesuan"></use>
                    </svg>
                    <div class="name">hx_结算，</div>
                    <div class="fontclass">#hx-hx_jiesuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_tianjiayonghu"></use>
                    </svg>
                    <div class="name">hx_添加用户</div>
                    <div class="fontclass">#hx-hx_tianjiayonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_bibianji"></use>
                    </svg>
                    <div class="name">hx_笔，编辑</div>
                    <div class="fontclass">#hx-hx_bibianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_tixing"></use>
                    </svg>
                    <div class="name">hx_提醒</div>
                    <div class="fontclass">#hx-hx_tixing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_wenhao"></use>
                    </svg>
                    <div class="name">hx_问号</div>
                    <div class="fontclass">#hx-hx_wenhao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_dunpai"></use>
                    </svg>
                    <div class="name">hx_盾牌</div>
                    <div class="fontclass">#hx-hx_dunpai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_zhuye"></use>
                    </svg>
                    <div class="name">hx_主页</div>
                    <div class="fontclass">#hx-hx_zhuye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_xiangmuguanli"></use>
                    </svg>
                    <div class="name">hx_项目管理</div>
                    <div class="fontclass">#hx-hx_xiangmuguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_baojiaguanlizhangdan"></use>
                    </svg>
                    <div class="name">hx_报价管理，账单</div>
                    <div class="fontclass">#hx-hx_baojiaguanlizhangdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_baomingguanli"></use>
                    </svg>
                    <div class="name">hx_报名管理</div>
                    <div class="fontclass">#hx-hx_baomingguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-_p_yaopinguanli"></use>
                    </svg>
                    <div class="name">1_p_药品管理</div>
                    <div class="fontclass">#hx-_p_yaopinguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-_p_tousujianyi"></use>
                    </svg>
                    <div class="name">2_p_投诉建议</div>
                    <div class="fontclass">#hx-_p_tousujianyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_jiaobiao"></use>
                    </svg>
                    <div class="name">hx_角标</div>
                    <div class="fontclass">#hx-hx_jiaobiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-_p_jigouzhongxin"></use>
                    </svg>
                    <div class="name">3_p_机构中心</div>
                    <div class="fontclass">#hx-_p_jigouzhongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_kefuzhongxin"></use>
                    </svg>
                    <div class="name">hx_19_p_客服中心</div>
                    <div class="fontclass">#hx-hx__p_kefuzhongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_yaopinbianmazhongxin"></use>
                    </svg>
                    <div class="name">hx_15_p_药品编码中心</div>
                    <div class="fontclass">#hx-hx__p_yaopinbianmazhongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_haocaibianmazhongxin"></use>
                    </svg>
                    <div class="name">hx_16_p_耗材编码中心</div>
                    <div class="fontclass">#hx-hx__p_haocaibianmazhongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_caiwujiesuan"></use>
                    </svg>
                    <div class="name">hx_18_p_财务结算</div>
                    <div class="fontclass">#hx-hx__p_caiwujiesuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_lianhetiguanli"></use>
                    </svg>
                    <div class="name">hx_20_p_联合体管理</div>
                    <div class="fontclass">#hx-hx__p_lianhetiguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_juecezhongxin"></use>
                    </svg>
                    <div class="name">hx_14_p_决策中心</div>
                    <div class="fontclass">#hx-hx__p_juecezhongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_qiye-jigoubianmazhongxin"></use>
                    </svg>
                    <div class="name">hx_17_p_企业-机构编码中心</div>
                    <div class="fontclass">#hx-hx__p_qiye-jigoubianmazhongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_tongyijiesuanguanli"></use>
                    </svg>
                    <div class="name">hx_13_p_统一结算管理</div>
                    <div class="fontclass">#hx-hx__p_tongyijiesuanguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_peisongzhongxin-guanli"></use>
                    </svg>
                    <div class="name">hx_10_p_配送中心-管理</div>
                    <div class="fontclass">#hx-hx__p_peisongzhongxin-guanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_qiyezhongxin"></use>
                    </svg>
                    <div class="name">hx_9_p_企业中心</div>
                    <div class="fontclass">#hx-hx__p_qiyezhongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_haocaijiesuan"></use>
                    </svg>
                    <div class="name">hx_8_p_耗材结算</div>
                    <div class="fontclass">#hx-hx__p_haocaijiesuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_yaopinyijia"></use>
                    </svg>
                    <div class="name">hx_6_p_药品议价</div>
                    <div class="fontclass">#hx-hx__p_yaopinyijia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_yaopinjiesuan"></use>
                    </svg>
                    <div class="name">hx_7_p_药品结算</div>
                    <div class="fontclass">#hx-hx__p_yaopinjiesuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_haocaiguanli"></use>
                    </svg>
                    <div class="name">hx_5_p_耗材管理</div>
                    <div class="fontclass">#hx-hx__p_haocaiguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_haocaiyijia"></use>
                    </svg>
                    <div class="name">hx_4_p_耗材议价</div>
                    <div class="fontclass">#hx-hx__p_haocaiyijia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_yonghu-toubu"></use>
                    </svg>
                    <div class="name">hx_用户-头部</div>
                    <div class="fontclass">#hx-hx_yonghu-toubu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_zongheyewuguanli"></use>
                    </svg>
                    <div class="name">hx_12_p_综合业务管理</div>
                    <div class="fontclass">#hx-hx__p_zongheyewuguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_cangchuguanli"></use>
                    </svg>
                    <div class="name">hx_11_p_仓储管理</div>
                    <div class="fontclass">#hx-hx__p_cangchuguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx__p_jiantou"></use>
                    </svg>
                    <div class="name">hx_21_p_箭头</div>
                    <div class="fontclass">#hx-hx__p_jiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_QQ"></use>
                    </svg>
                    <div class="name">hx_QQ</div>
                    <div class="fontclass">#hx-hx_QQ</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_fujianshengcailogo"></use>
                    </svg>
                    <div class="name">hx_福建省采logo</div>
                    <div class="fontclass">#hx-hx_fujianshengcailogo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_wenhao-bangzhuzhongxin"></use>
                    </svg>
                    <div class="name">hx_问号-帮助中心</div>
                    <div class="fontclass">#hx-hx_wenhao-bangzhuzhongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_sanminglianmeng-b"></use>
                    </svg>
                    <div class="name">hx_三明联盟-b</div>
                    <div class="fontclass">#hx-hx_sanminglianmeng-b</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_quanshenglvehao"></use>
                    </svg>
                    <div class="name">hx_圈省略号</div>
                    <div class="fontclass">#hx-hx_quanshenglvehao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_quangantanhao"></use>
                    </svg>
                    <div class="name">hx_圈感叹号</div>
                    <div class="fontclass">#hx-hx_quangantanhao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#hx-hx_quanwenhao"></use>
                    </svg>
                    <div class="name">hx_圈问号</div>
                    <div class="fontclass">#hx-hx_quanwenhao</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#hx-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
